<template>
    <div class="platformData">
        <InfoTop :hdBgUrl="bgImage" infoTopTitle="平台数据" infoTopEnglish="PLATFORM DATA"></InfoTop>
        <div class="dataContent">
            <div class="totalData">
                <ul>
                    <li v-for="item in data" :key="item.id">
                        <p v-text="item.text"></p>
                        <span v-if="item.isMoney" class="numJ"></span>
                        <span v-else class="numJ"></span>
                    </li>
                </ul>
            </div>
            <!-- borrower -->
            <div class="borrower">
                <p class="borrowerTitle">累计借款人数<font v-text="borrowerNum"></font>人</p>
                <div class="borrowerSelect">
                    <el-select v-model="borrowerValue">
                        <el-option
                            v-for="item in borrowerOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div id="borrowerChart"></div>
            </div>
            <!-- borrower -->
            <!-- investor -->
            <div class="investor">
                <p class="investorTitle">累计投资人数<font v-text="investorNum"></font>人</p>
                <div class="investorSelect">
                    <el-select v-model="investorValue">
                        <el-option
                            v-for="item in investorOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div id="investorChart"></div>
            </div>
            <!-- investor -->
            <!-- investMoney -->
            <div class="investMoney">
                <p class="investMoneyTitle">借款资金占比</p>
                <div class="clearFix">
                    <div class="fl">
                        <h3>最大借款人待还金额占比</h3>
                        <div id="topChart"></div>
                    </div>
                    <div class="fr">
                        <h3>前十大借款人待还金额占比</h3>                        
                        <div id="tenChart"></div>
                    </div>
                </div>
            </div>
            <!-- investMoney -->
            <!-- average -->
            <div class="average">
                <p class="averageTitle">均值数据统计</p>
                <ul>
                    <li v-for="item in averages" :key="item.id">
                        <div><i></i></div>
                        <p v-text="item.num"></p>
                        <span v-text="item.text"></span>
                    </li>
                </ul>
            </div>
            <!-- average -->
            <!-- overdue -->
            <div class="overdue">
                <p class="overdueTitle">累计项目逾期率 <font v-text="overdueNum"></font></p>
                <div class="overdueContent">
                    <ul>
                        <li v-for="item in overdues" :key="item.id">
                            <p v-text="item.text"></p>
                            <span v-text="item.num"></span>
                        </li>
                    </ul>
                </div>
                <div class="rank clearFix">
                    <div class="fl">
                        <h4>项目分级逾期率</h4>
                        <ul>
                            <li v-for="item in ranks1" :key="item.id">
                                <i class="long">
                                    <transition name="stl">
                                        <i class="short" v-if="true"></i>
                                    </transition>
                                </i>
                                <p v-text="item.text"></p>
                                <span>{{ item.num }}%</span>
                            </li>
                        </ul>
                    </div>
                    <div class="fr">
                        <h4>金额分级逾期率</h4>
                    </div>
                </div>
            </div>
            <!-- overdue -->
        </div>
    </div>
</template>

<script>
    import InfoTop from '../include/InfoTop.vue';
    import echarts from 'echarts';
    let lineOption, dataId = 2, pieOption;
    let whichLineColor = [
        {
            axisPointerColor: '#f6b6a1', // 背景竖线颜色
            startColor: '#ed6d44', // 折线开始颜色
            stopColor: '#f6bf53' // 折线结束颜色
        },
        {
            axisPointerColor: '#8b6dff', // 背景竖线颜色
            startColor: '#8b6cff', // 折线开始颜色
            stopColor: '#70b6fb' // 折线结束颜色
        }
    ]
    let yData = [
        {
            data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120],
            num: 780
        },
        {
            data: [0, 0, 0, 0, 0, 0, 20, 40, 60, 80, 100, 120],
            num: 420
        },
        {
            data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
            num: 1200
        },
        {
            data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
            num: 1200
        },
        {
            data: [0, 0, 0, 0, 0, 0, 20, 40, 60, 80, 100, 120],
            num: 420
        },
        {
            data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120],
            num: 780
        }
    ]
    let myPie = [
        {
            color: ['#c3dfff', '#f8d395'],
            legendData: ['最大借款人待还金额', '其他借款人待还金额'],
            seriesData: [
                {
                    value: 0.88, 
                    name: '最大借款人待还金额',
                    label: {
                        normal: {
                            show: true,
                            color: '#000000',
                            formatter: '{c}%',
                            fontSize: 28
                        }
                    }
                },
                {
                    value:99.12, 
                    name:'其他借款人待还金额'
                }
            ]
        },
        {
            color: ['#f0918e', '#f8d395'],
            legendData: ['前十大借款人待还金额', '其他借款人待还金额'],
            seriesData: [
                {
                    value: 2.15, 
                    name: '前十大借款人待还金额',
                    label: {
                        normal: {
                            show: true,
                            color: '#000000',
                            formatter: '{c}%',
                            fontSize: 28
                        }
                    }
                },
                {
                    value: 97.85, 
                    name:'其他借款人待还金额'
                }
            ]
        }
    ]
    function setLineOption(lineChartId, id){
        switch(lineChartId){
            case 0:
                id = dataId;
                break;
            case 1:
                id = dataId + yData.length / 2;
                break;
            default:
                break;
        }
        lineOption = {
            title: {
                subtext: '（人）',
                left: '55px',
                top: '10px'
            },
            tooltip: {
                trigger: 'axis',
                formatter: '{b}月:{c}人',
                backgroundColor: 'rgba(255, 255, 255, 1)',
                padding: [10, 20],
                textStyle: {
                    color: '#333333',
                    fontSize: 16
                },
                axisPointer: {
                    type: 'line',
                    lineStyle: {
                        color:  whichLineColor[lineChartId].axisPointerColor// 传参
                    }
                },
                extraCssText: 'box-shadow: 2px 2px 13px rgba(67, 67, 67, 0.3)'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dotted'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#dfdfdf'
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                },
                axisTick: {
                    inside: true
                },
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#dfdfdf'
                    }
                }
            },
            series: [
                {
                    type: 'line',
                    smooth: true,
                    data: yData[id].data,// 传参
                    lineStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [{
                                    offset: 0, color: whichLineColor[lineChartId].startColor// 传参
                                }, {
                                    offset: 1, color: whichLineColor[lineChartId].stopColor// 传参
                                }],
                                globalCoord: false
                            },
                            width: 4,
                            shadowColor: 'rgba(242, 242, 242, 1)',
                            shadowOffsetY: 8
                        }
                    },
                    symbolSize: 0
                }
            ]   
        }
    }
    function setPieOption(pieId){
        pieOption = {
            color: myPie[pieId].color, // 传参
            tooltip: {
                trigger: 'item',
                formatter: "{b}<br/><p style = 'color: #ef7b55'>{d}%</p>",
                backgroundColor: 'rgba(255, 255, 255, 1)',
                textStyle: {
                    color: '#333333',
                    fontSize: 16
                },
                extraCssText: 'box-shadow: 2px 2px 13px rgba(67, 67, 67, 0.3)',
                padding: 12
            },
            legend: {
                orient: 'horizontal',
                x: 'center',
                y: 'bottom',
                selectedMode: false,
                itemWidth: 8,
                itemHeight: 8,
                itemGap: 30,
                data:myPie[pieId].legendData // 传参
            },
            series: [
                {
                    type:'pie',
                    radius: ['55%', '70%'],
                    avoidLabelOverlap: false,
                    minAngle: 18,
                    hoverOffset: 7,
                    startAngle: 140,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    itemStyle: {
                        emphasics: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    data: myPie[pieId].seriesData // 传参
                }
            ]
        }
    }
    
    export default{
        components:{
            InfoTop
        },
        data(){
            return {
                data: [
                    {
                        text: '累计成交额(元)',
                        num: '128099790.00',
                        isMoney: true
                    },
                    {
                        text: '为用户赚取收益(元)',
                        num: '17898923.00',
                        isMoney: true
                    },
                    {
                        text: '安全运营天数(天)',
                        num: 785,
                        isMoney: false
                    },
                    {
                        text: '累计注册人数(人)',
                        num: 1899000,
                        isMoney: false
                    },
                    {
                        text: '累计成交笔数(笔)',
                        num: 189971,
                        isMoney: false
                    },
                    {
                        text: '当前借贷笔数(笔)',
                        num: 99091,
                        isMoney: false
                    },
                    {
                        text: '借贷余额(元)',
                        num: '920003.00',
                        isMoney: true
                    },
                    {
                        text: '当前出借人数量(人)',
                        num: 123457,
                        isMoney: false
                    },
                    {
                        text: '当前借款人数量(人)',
                        num: 112987,
                        isMoney: false
                    }
                ],
                bgImage: require('../../../assets/images/databg.png'),
                borrowerNum: yData[dataId].num, // title data
                investorNum: yData[dataId + yData.length / 2].num, // title data
                borrowerOptions: [ 
                    { 
                        value: 2016,
                        label: '2016'
                    },
                    { 
                        value: 2017,
                        label: '2017' 
                    },
                    { 
                        value: 2018,
                        label: '2018' 
                    }
                ],
                investorOptions: [
                    {
                        value: 2016,
                        label: '2016'
                    },
                    {
                        value: 2017,
                        label: '2017'
                    },
                    {
                        value: 2018,
                        label: '2018'
                    }
                ],
                borrowerValue: 2018, // select value
                investorValue: 2018, // select value
                averages: [
                    {
                        num: 132451,
                        text: '人均累计投资额(元)'
                    },
                    {
                        num: 132451,
                        text: '人均累计借款额(元)'
                    },
                    {
                        num: 132451,
                        text: '笔均累计借款额(元)'
                    }
                ],
                overdueNum: '0.12%',
                overdues: [
                    {
                        text: '逾期金额(元)',
                        num: 132298.45
                    },
                    {
                        text: '逾期笔数(笔)',
                        num: 1920
                    },
                    {
                        text: '累计代偿笔数(笔)',
                        num: 264
                    },
                    {
                        text: '累计代偿金额(元)',
                        num: 132.00
                    },
                    {
                        text: '逾期90天以上金额(元)',
                        num: 2000.00
                    },
                    {
                        text: '逾期90天以上笔数(笔)',
                        num: 210
                    }
                ],
                ranks1: [
                    {
                        text: '累计90天(含)',
                        num: '5.12'
                    },
                    {
                        text: '90-180天(含)',
                        num: '6.78'
                    },
                    {
                        text: '181天以上',
                        num: '9.50'
                    }
                ]
            }
        },
        mounted(){
            let numJ = document.querySelectorAll(".numJ"),
                numJlength = numJ.length;
            function getHtml(text, container) {
                let str = text.toString();
                let amountHtml = '';
                for(let i = 0; i < str.length; i ++){
                    amountHtml += '<em>' + str.charAt(i) + '</em>';
                }
                container.innerHTML = amountHtml;
                let bitBox = container.getElementsByTagName('em'),
                    bitboxArr = Array.prototype.slice.call(bitBox);
                bitboxArr.forEach((item,i) => {
                    let $thisText = item.innerHTML;
                    if($thisText >= "0" && $thisText <= "9"){
                        item.innerHTML = "0";
                    }
                    let currentNumber = 0;
                    let timer = setInterval(function () {
                        if(item.innerHTML >= str.charAt(i)){
                            clearInterval(timer);
                        }
                        else {
                            item.innerHTML = currentNumber;
                        }
                        currentNumber ++;
                    }, 500 / (str.charAt(i)));
                })
            }
            for(let i = 0; i < this.data.length; i ++){
                getHtml(this.data[i].num,numJ[i]);
            }
            this.$nextTick(function() {
                this.drawLine('borrowerChart', 0);
                this.drawLine('investorChart', 1);
                this.drawPie('topChart', 0);
                this.drawPie('tenChart', 1);
            })
        },
        methods:{
            drawLine(divId, chartId){
                setLineOption(chartId);
                let chart = echarts.init(document.getElementById(divId));
                chart.setOption(lineOption);
            },
            drawPie(divId, chartId){
                setPieOption(chartId);
                let chart = echarts.init(document.getElementById(divId));
                chart.setOption(pieOption);
            }
        },
        watch:{
            borrowerValue:function(){
                switch(this.borrowerValue){
                    case 2016:
                        dataId = 0;
                        break;
                    case 2017:
                        dataId = 1;
                        break;
                    case 2018:
                        dataId = 2;
                        break;
                    default:
                        break;
                }
                this.borrowerNum = yData[dataId].num;
                this.drawLine('borrowerChart', 0);
            },
            investorValue: function(){
                switch(this.investorValue){
                    case 2016:
                        dataId = 0;
                        break;
                    case 2017:
                        dataId = 1;
                        break;
                    case 2018:
                        dataId = 2;
                        break;
                    default:
                        break;
                }
                this.investorNum = yData[dataId + yData.length / 2].num;
                this.drawLine('investorChart', 1);
            }
        }
    }
</script>

<style lang="scss" scoped>
    @mixin titleStyle{
        text-align: center;
        font-size: 28px;
    }
    @mixin averageIconDiv{
        width: 90px;
        height: 90px;
        margin: 0 auto 30px auto;
        border-radius: 200px;
        box-shadow: 3px 3px 34px rgba($color: #000000, $alpha: 0.2);
    }
    @mixin averageIcon{
        display: block;
        background: url("../../../assets/images/product-triangle.png") no-repeat;
        width: 45px;
        height: 45px;
        margin: 0 auto;
        position: relative;
    }
    .platformData{
        width: 920px;
        margin: 0 0 50px 0;
    }
    .dataContent{
        background: #ffffff;
    }
    .totalData{
        width: 820px;
        height: 384px;
        background: #ffffff;
        margin: 0 auto;
        box-shadow: 4px 4px 23px rgba($color: #434343, $alpha: 0.2);
        position: relative;
        top: -56px;
        li{
            display: inline-block;
            text-align: left;
            overflow: hidden;
            margin-top: 50px;
            &:nth-child(1), &:nth-child(4), &:nth-child(7){
                margin-left: 40px;
                width: 320px;
            }
            &:nth-child(2), &:nth-child(5), &:nth-child(8){
                width: 290px;
            }
            p{
                color: #959595;
            }
            span{
                font-size: 28px;
            }
        }
    }
    .borrowerTitle, .overdueTitle{
        @include titleStyle;
        font{
            color: #f08664;
            margin-left: 30px;
        }
    }
    .investorTitle{
        @include titleStyle;
        font{
            color: #8b6dff;
            margin-left: 30px;
        }
    }
    .investMoneyTitle, .averageTitle{
        @include titleStyle;
    }
    .average{
        margin: 60px 0 0 0; 
    }
    .borrower, .investor{
        width: 820px;
        margin: 0 auto;
        position: relative;
    }
    #borrowerChart, #investorChart{
        height: 350px;
    }
    .borrowerSelect, .investorSelect{
        position: absolute;
        top: 50px;
        right: 88px;
        z-index: 1000;
    }
    #topChart, #tenChart{
        width: 460px;
        height: 280px;
    }
    .investMoney .fl, .investMoney .fr{
        h3{
            font-weight: normal;
            font-size: 16px;
            text-align: center;
            margin: 50px 0 0 0;
        }
    }
    .average li{
        display: inline-block;
        width: 33%;
        text-align: center;
        margin: 55px 0 90px 0;
        p{
            font-size: 24px;
        }
        span{
            color: #666666;
        }
        &:nth-child(1){
            div{
                @include averageIconDiv;
                i{
                    @include averageIcon;
                    background-position: 2px -179px;
                    top: 23px;
                }
            }
        }
        &:nth-child(2){
            div{
                @include averageIconDiv;
                i{
                    @include averageIcon;
                    background-position: -43px -179px;
                    top: 22px;
                }
            }
        }
        &:nth-child(3){
            div{
                @include averageIconDiv;
                i{
                    @include averageIcon;
                    position: relative;
                    left: 3px;
                    background-position: -88px -179px;
                    top: 22px;
                    left: 4px;
                }
            }
        }
    }
    .overdueContent{
        width: 780px;
        margin: 48px auto 0 auto;
        padding: 0 0 30px 0;
        background: #f8f8f8;
        li{
            display: inline-block;
            text-align: left;
            p{
                color: #666666;
            }
            span{
                font-size: 24px;
            }
            &:nth-child(1), &:nth-child(4){
                width: 290px;
                margin: 30px 0 0 50px;
            }
            &:nth-child(2), &:nth-child(5){
                width: 253px;
            }
        }
    }
    .rank{
        width: 780px;
        margin: 50px auto 0 auto;
        h4{
            text-align: left;
            font-size: 20px;
            font-weight: normal;
        }
        .fl, .fr{
            width: 43%;
            margin: 0 0 66px 0;
        }
        li{
            margin: 32px 0 0 0;
            position: relative;
            .long{
                display: block;
                width: 268px;
                background: #f3f3f3;
                height: 8px;
                border-radius: 8px;
            }
            p{
                color: #a0a0a0;
                margin: 9px 0 0 0;
            }
            span{
                position: absolute;
                right: 0;
                top: -7px;
                font-size: 16px;
            }
        }
    }
</style>

<style lang="scss">
    em{
        font-style: normal;
    }
    .el-select>.el-input{
        width: 90px;
    }
    .el-popper[x-placement^=bottom]{
        margin-top: -1px;
        .popper__arrow{
            display: none;
        }
    }
    .el-select-dropdown__list{
        padding: 0;
    }
    .el-input__inner{
        border-radius: 0;
        height: 30px;
    }
    .el-select .el-input.is-focus .el-input__inner{
        border-color: #dfdfdf;
    }
    .el-select-dropdown{
        border-radius: 0;
        box-shadow: none;
    }
    .el-select-dropdown__item{
        height: 30px;
        line-height: 30px;
        padding: 0 20px 0 16px;
    }
    .el-select-dropdown__item span{
        line-height: 30px!important;
    }
    .el-select-dropdown__item.selected{
        font-weight: normal;
        color: #f08564;
    }
</style>